<!DOCTYPE html>
<html>
<head>
<title>OSM Buildings - Leaflet</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
html, body {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#map {
  height: 100%;
}
</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>
<script src="../dist/OSMBuildings-Leaflet.js"></script>
</head>

<body>
<div id="map"></div>

<script>
var map = new L.Map('map').setView([52.50440, 13.33522], 17);

new L.TileLayer(
  'http://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png',
  { attribution: 'Map tiles &copy; <a href="http://mapbox.com">MapBox</a>', maxNativeZoom: 19, maxZoom: 21 }
).addTo(map);

var osmb = new OSMBuildings(map)
  .date(new Date(2015, 5, 15, 17, 30))
  .load()
  .click(function(id) {
    console.log('feature id clicked:', id);
  });

L.control.layers({}, { Buildings: osmb }).addTo(map);
</script>
</body>
</html>